import 'package:flutter/material.dart';
import 'package:terminal_flutter_demo/font/CustomIcon.dart';
import 'package:terminal_flutter_demo/widgets/my_icon.dart';

// 类似html flex布局相关样式属性设置
class ColumnRowPage extends StatelessWidget {
  ColumnRowPage({Key? key}) : super(key: key) {
    print('');
  }

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size; // 获取屏幕信息
    print('size=${size}');
    return ListView(
      children: [
        Container(
          width: double.infinity, // 宽度撑满父级宽度
          height: 200,
          color: Colors.blueGrey,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween, // 类似html flex布局
            crossAxisAlignment: CrossAxisAlignment.center, // 类似html flex布局
            children: <Widget>[
              MyIcon(
                Icons.home,
                color: Colors.red,
              ),
              MyIcon(
                Icons.search,
                color: Colors.black,
              ),
              MyIcon(
                CustomIcon.weixin,
                color: Colors.green,
              ),
            ],
          ),
        ),
        Container(
          width: double.infinity,
          height: 400,
          color: Colors.teal,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              MyIcon(
                Icons.home,
                color: Colors.red,
              ),
              MyIcon(
                Icons.search,
                color: Colors.black,
              ),
              MyIcon(
                CustomIcon.weixin,
                color: Colors.green,
              ),
            ],
          ),
        ),
        Container(
          width: double.infinity,
          height: 200,
          color: Colors.brown,
          child: Row(
            // mainAxisAlignment: MainAxisAlignment.spaceAround,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Expanded(
                flex: 1,
                child: MyIcon(
                  Icons.home,
                  color: Colors.red,
                ),
              ),
              const SizedBox(
                width: 6,
              ),
              MyIcon(
                CustomIcon.weixin,
                color: Colors.green,
              ),
            ],
          ),
        ),
        Container(
          width: double.infinity,
          height: 200,
          color: Colors.brown,
          child: Flex(
            direction: Axis.horizontal,
            children: <Widget>[
              Expanded(
                flex: 1,
                child: MyIcon(
                  Icons.home,
                  color: Colors.red,
                ),
              ),
              const SizedBox(
                width: 6,
              ),
              Expanded(
                flex: 2,
                child: MyIcon(
                  CustomIcon.weixin,
                  color: Colors.green,
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}
